<template>
  <div>
    <byd-header />
    <!-- 嵌套网页 -->
    <div id="box">
      <iframe
        seamless
        src="/static/ThreeCar.html"
        scrolling="no"
        frameborder="0"
        style="zoom: 50%"
      ></iframe>
    </div>

    <!-- 版心 -->
    <div class="container">
      <!-- 购车指南锚点 -->
      <el-menu
        router
        :default-active="$route.path"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#00b1a9"
      >
        <el-menu-item index="/details/cardetails">详情</el-menu-item>
        <el-menu-item index="/details/bystages">金融服务</el-menu-item>
        <el-menu-item
          ><router-link to="/bydlocation">预约试驾</router-link></el-menu-item
        >
        <el-menu-item
          ><router-link to="/compare">车型对比</router-link></el-menu-item
        >
        <div class="gongneng">
          <!-- 分享 -->
          <div>
            <el-popover placement="bottom" width="110" trigger="hover">
              <div style="text-align: center; cursor: pointer">
                <Button
                  style="margin: 0 auto"
                  @click="copyLink(`http://8.136.106.157:8080${$route.path}`)"
                  size="small"
                  >点击复制链接</Button
                ><br />
                <span>二维码分享</span>
                <img
                  src="../assets/分享二维码.jpg"
                  alt=""
                  style="width: 100px; height: 100px"
                />
              </div>
              <el-button slot="reference"
                ><i class="el-icon-share"></i><span>分享</span></el-button
              >
            </el-popover>
          </div>
          <!-- 收藏 -->
          <div>
            <el-button
              :plain="true"
              @click="collect"
              style="background: #545c64; border: 0; font-size: 18px"
              ><i class="el-icon-star-off"></i><span>收藏</span></el-button
            >
          </div>
        </div>
      </el-menu>

      <router-view />
    </div>
    <!-- 页脚 -->
    <byd-footer />
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import BydFooter from "../components/BydFooter.vue";
import BydHeader from "../components/BydHeader.vue";

export default {
  components: { BydHeader, BydFooter },
  data() {
    return {
      phone:'',
      visible: false,
    };
  },
  mounted() {
    this.save()
  },
  methods: {
    save(){
      this.phone = sessionStorage.getItem("phone");
    },
    ...mapMutations(["getPhone"]),
    //点击复制链接
    copyLink(val) {
      // 复制链接
      let url = val; // 后台接口返回的链接地址
      let inputNode = document.createElement("input"); // 创建input
      inputNode.value = url; // 赋值给 input 值
      document.body.appendChild(inputNode); // 插入进去
      inputNode.select(); // 选择对象
      document.execCommand("Copy"); // 原生调用执行浏览器复制命令
      inputNode.className = "oInput";
      inputNode.style.display = "none"; // 隐藏
      this.$message({
        message: "复制成功",
        type: "success",
        offset: "400",
        duration: 2000,
        center: true,
      });
    },
    //收藏成功提示
    collect() {
      if(!this.phone){
        this.$message({
        message: "请先登录",
        type: "warn",
        offset: "400",
        duration: 2000,
        center: true,
      });
        return
        }else{
      const url = "/fav";
      this.axios.post(
        url,
        `cid=4&phone=${this.phone}&title="海豹-四驱性能版"&gprice=28.98&big_pic=/pic/param/hb_sq.jpg`,
        (data) => {
        }
      );
      this.$message({
        message: "恭喜!收藏成功",
        type: "success",
        offset: "400",
        duration: 2000,
        center: true,
      });
    }
    },
  },
};
</script>

<style lang="scss" scoped>
html {
  overflow-x: hidden;
}
* {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
del,
details,
dfn,
div,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
html,
iframe,
img,
ins,
kbd,
label,
legend,
mark,
menu,
nav,
object,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  color: #000;
}
a {
  text-decoration: none;
}

// 多媒体查询版心
@media (max-width: 1400px) {
  .container {
    width: 1200px;
  }
}
@media (min-width: 1400px) {
  .container {
    width: 1400px;
  }
}
.container {
  // border: 1px solid red;
  margin: 0px auto 20px;
  box-shadow: 1px 2px 20px 4px rgb(0, 0, 0, 20%);
  border-radius: 10px 10px 20px 20px;
  //购车指南条
  .el-menu-demo {
    border-radius: 10px;
    background: #545c64;

    .el-menu-item {
      display: inline-block;
      font-size: 18px;
      padding: 0 50px;
      margin-left: 10px;
    }
    //功能区
    .gongneng {
      display: flex;
      float: right;
      margin-right: 50px;
      font-size: 18px;
      line-height: 60px;
      color: #fff;
      cursor: pointer;

      i {
        display: inline-block;
        width: 18px;
        height: 18px;
        vertical-align: baseline;
        color: white;
        margin: 0 10px;
      }

      span {
        color: #fff;
      }
      // #cfaa75
      div:hover i {
        color: #00b1a9;
      }
      div:hover span {
        color: #00b1a9;
      }
      //分享
      & > div:first-child {
        margin: 0 20px;

        button {
          background: #545c64;
          border: 0;
          font-size: 18px;
        }
      }
      //收藏
    }
  }
}

// 分享弹框

#box {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: calc(100vw * 5 / 9);
}

iframe {
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: 1px 2px 20px 4px rgb(0, 0, 0, 20%);
}

.el-cascader-panel {
  height: 154px;
}
.el-popper {
  box-shadow: 1px 2px 40px 4px rgb(0, 0, 0, 30%);
}
</style>
